<script setup>
import "ol/ol.css"
import Map from 'ol/Map.js';
import {Feature, Overlay, View} from "ol";
import {onMounted} from "vue";
import getTDTLayer from "@/js/UseTDT2305.js";
import {registerCGCS2000} from "@/js/UseTDT2305.js";
import * as turf from "@turf/turf"
import {GeoJSON} from "ol/format.js";
import VectorSource from "ol/source/Vector.js";
import VectorLayer from "ol/layer/Vector.js";

let map

const tdt_ter = getTDTLayer('地形晕渲','经纬度投影','d06c497b107f57ebd6a0f8fbf967292d')

const initMap = () => {
  registerCGCS2000()

 map = new Map({
    target: 'map',
    layers: [tdt_ter],
    view: new View({
      center: [116, 30],
      zoom: 3,
      projection: 'EPSG:4490'
    })
  })
}
onMounted(initMap)
const vectorSource = new VectorSource()
const format = new GeoJSON({
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:4490'
})
const AlongExample = async () => {
  vectorSource.clear()
  // json对象，就是普通的json数据（值对）
  const data = await getData()
  const length = turf.length(data.features[0], {units: 'kilometers'})
  for (let i = 1; i < length / 0.2; i++) {
    // 两个不同的库配合使用，它有一个要解决的核心问题就是数据的互操作
    const turfpoint = turf.along(data.features[0], i * 0.2, {units: 'kilometers'});
    const olpoint = format.readFeature(turfpoint)
    vectorSource.addFeature(olpoint)
  }
}

const BufferExample = async () => {
  vectorSource.clear()
  const data = await getData()
  console.log(data)
  const turfbuffer = turf.buffer(data, 25, {units: 'meters'})
  const olbuffer = format.readFeatures(turfbuffer)
  vectorSource.addFeatures(olbuffer)
}

const IntersectExample = async () => {
  vectorSource.clear()
  const data = await getData()
  for (let i = 0; i < data.features.length; i++) {
    for (let j = i; j < data.features.length; j++) {
      const interpoint = turf.lineIntersect(data.features[i], data.features[j])
      if(interpoint){
        const olintersectpoint = format.readFeatures(interpoint)
        vectorSource.addFeatures(olintersectpoint)
      }
    }
  }
}

const getData = async () => {
  const response = await fetch('data/roads-seoul.geojson')
  const data = await response.json()

  // 将文本的数据读成feature对象
  const features = format.readFeatures(data)
  vectorSource.addFeatures(features)
  const vectorLayer = new VectorLayer({
    source: vectorSource
  })
  if(!map.getLayers().getArray().includes(vectorLayer)){
    map.addLayer(vectorLayer)
  }
  map.getView().fit(vectorSource.getExtent())
  return data
}

</script>

<template>
  <div class="edittools">
    <button @click="AlongExample">ALong实例</button>
    <button @click="BufferExample">缓问区</button>
    <button @click="IntersectExample">相交</button>
  </div>
<div id="map"></div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 700px;
}

.edittools{
  position: absolute;
  top:10px;
  left: 35px;
  z-index: 2;
  opacity: 0.5;
}

.edittools button{
  width: 75px;
  height: 30px;
}

/*#popup {
  position: absolute;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #CCCCCC;
  min-width: 280px;
  z-index: 1;
}*/

#popup{
  position: absolute;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  border:1px solid #CCCCCC;
  min-width: 280px;
  z-index: 1;
}

/*#popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}*/

#popup-closer{
  text-decoration: none;
  position: absolute;
  top:2px;
  right:8px
}

/*#popup-closer:after {
  content: "✖";
}*/

#popup-closer:after{
  content:"✖";
}

</style>